<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="css/style.css" />
  <script src="./js/vue.js"></script>
  <script src="./js/md5.js"></script>
  <script src="./js/axios.js"></script>
  <style>
    #box{
      width:1000px;
      border:1px solid black;
      margin:auto;
    }
    #box h1{
      width: 100%;
      height:60px;
      text-align:center;
      line-height:60px;
    }
    #box table{
      width:100%;
      text-align:center;
    }

  </style>
</head>
<body>
  <div id="box">
    <h1>资讯详情列表</h1>
    <table border="1">
      <tr>
        <td>标题</td>
        <td>内容</td>
        <td>创建时间</td>
        <td v-show="flag">
          操作
        </td>
      </tr>
      <tr v-for="(item,index) in informationList.slice(0,-1)">
        <td>{{item.title}}</td>
        <td>{{item.content}}</td>
        <td>{{item.createTime}}</td>
        <td v-show="flag">
          <button @click="updata(item.id)">修改</button>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
    </table>
    <a href="#" @click="indexPage">首页</a> <a href="#" @click="previousPage">上一页</a> <a href="#" @click="nextPage">下一页</a> <a href="#" @click="endPage">末页</a>
    第<span>{{dqys}}</span>页/共<span>{{zys}}</span>页
  </div>
  <script>
    new Vue({
      el:"#box",
      data:{
        flag:false,
        informationList:{},
        dqys:1,
        mysl:5,
        zys:1
      },
      methods:{
        md5Public:async function(objectStr){
          let randomNum = 0;
          //接口拿随机数
          await axios({
              url:"http://localhost:8080/setRedisNum",
              methods:"get"
          }).then(res => {
              randomNum = res.data;
              
          })
          //放到header里的参数 时间戳 随机数 加密的字符串
          //时间戳
          var dateStr = new Date();
          dateStr = Date.now();
              
          //把obj按照key值升序
          let sortObject = function(obj){
              let sorter = function(a,b){
                  return obj[a] - obj[b];
              }
              let keys = Object.keys(obj);
              keys.sort(sorter);
              let res = {};
              keys.forEach(key => {
                  res[key] = obj[key];
              });
              return res;
          }
          //升序的对象
          var sxStr = sortObject(objectStr);
          //把升序的对象转成字符串
          var jsonStr = "";
          for(let obj in objectStr){
              jsonStr += obj+"="+objectStr[obj]+"&";
          }
          //把最后一个&符号切割了
          jsonStr = jsonStr.substr(0, jsonStr.length - 1); 

          //加密字符串
          var str = MD5(jsonStr+randomNum);
          await axios({
              url:"http://localhost:8080/returnInterfaceStr",
              methods:"POST",
              params:objectStr,
              headers:{
                  "TimeStamp":dateStr,
                  "randomNum":randomNum,
                  "encryptionStr":str
              }
          }).then(res => {
              if( res.data == true ){
                  return true;
              }else{
                  return false;
              }
          })
          return true;
        },
        showData:async function(){
          let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
          if( flag == true ){
            axios({
              url:"http://localhost:8080/getinformationListFy",
              methods:"POST",
              params:{
                pageNo:this.dqys,
                pageSize:this.mysl,
              }
            }).then(res => {
              this.informationList = res.data;
              this.zys = this.informationList[this.informationList.length-1].pageCount;
            })
          }
        },
        nextPage:function(){
          this.dqys ++;
          if( this.dqys > this.zys ){
            this.dqys = this.zys
          }
          this.showData();
        },
        previousPage:function(){
          this.dqys --;
          if( this.dqys < 1 ){
            this.dqys = 1
          }
          this.showData();
        },
        endPage:function(){
          this.dqys = this.zys;
          this.showData();
        },
        indexPage:function(){
          this.dqys = 1;
          this.showData();
        },
        updata:function(id){
          window.location.href = "./informationUpdata.html?id="+id;
        },
        del:async function(id){
          let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
          if( flag == true ){
            axios.get("http://localhost:8080/delInformationListById?id="+id).then(res => {
              if( res.data == true ){
                alert("删除成功!");
                window.location.href = "./informationList.html";
              }else{
                alert("删除失败!");
              }
            })
          }
        }
      },
      created:function(){
        let storage = window.localStorage;
        let typeNum = storage.getItem("type");
        if( typeNum == 1 ){
          this.flag = true;
        }else{
          this.flag = false;
        }
        this.showData();
      }
    })



  </script>
</body>
</html>